<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>菜单编辑</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<link rel="stylesheet" href="${ctxPath}/lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="${ctxPath}/css/public.css" media="all">
</head>

<body>
	<div class="layuimini-container">
		<div class="layuimini-main">

			<form class="layui-form" lay-filter="formInfo">
				<input type="hidden" name="id" id="id" class="layui-input" />
				<input type="hidden" name="pid" id="pid" class="layui-input" />

				<div class="layui-row">
					<div class="layui-col-md4">
						<label class="layui-form-label">菜单名称</label>
						<div class="layui-input-block">
							<input type="text" id="name" name="name" lay-verType="tips" required lay-verify="required"
								lay-reqtext="菜单名不能够为空 !" autocomplete="off" class="layui-input" />
						</div>
					</div>

					<div class="layui-col-md4">
						<label class="layui-form-label">菜单编码</label>
						<div class="layui-input-block">
							<input type="text" id="code" name="code" class="layui-input" />
						</div>
					</div>

					<div class="layui-col-md4">
						<label class="layui-form-label">路由地址</label>
						<div class="layui-input-block">
							<input type="text" id="router" name="router" class="layui-input" />
						</div>
					</div>
				</div>
				<div class="layui-row">
					<div class="layui-col-md4">
						<label class="layui-form-label">授权</label>
						<div class="layui-input-block">
							<input type="text" id="perms" name="perms" class="layui-input" />
						</div>
					</div>
					<div class="layui-col-md4">
						<label class="layui-form-label">菜单类型</label>
						<div class="layui-input-block">
							<select name="type" id="type" lay-verType="tips" lay-verify="required">
								<option value="0">目录</option>
								<option value="1">菜单</option>
								<option value="2">按钮</option>
							</select>
						</div>
					</div>
					<div class="layui-col-md4">
						<label class="layui-form-label">所属应用</label>
						<div class="layui-input-block">
							<select name="application" id="application" lay-verType="tips" lay-verify="required">
								<option value=''>所属应用</option>
							</select>
						</div>
					</div>
				</div>
				<div class="layui-row">
					<div class="layui-col-md4">
						<label class="layui-form-label">授权</label>
						<div class="layui-input-block">
							<select name="weight" id="weight">
								<option value='2'>业务权重</option>
								<option value='1'>系统权重</option>
							</select>
						</div>
					</div>
					<div class="layui-col-md4">
						<label class="layui-form-label">菜单排序</label>
						<div class="layui-input-block">
							<input type="text" id="sort" name="sort" value="100" lay-verify="number"
								class="layui-input" />
						</div>
					</div>
					<div class="layui-col-md4">
						<label class="layui-form-label">菜单图标</label>
						<div class="layui-input-block">
							<input type="text" id="icon" name="icon" class="layui-input" />
						</div>
					</div>
				</div>
				<div class="layui-row">
					<div class="layui-col-md12">
						<label class="layui-form-label">父菜单</label>
						<div class="layui-input-block">
							<div id="authoritiesEditParentSel" class="xm-select-demo"></div>
						</div>
					</div>
				</div>

				<div class="layui-row">
					<div class="layui-col-md12">
						<label class="layui-form-label">描述</label>
						<div class="layui-input-block">
							<textarea placeholder="请输入内容" id="remark" name="remark" class="layui-textarea"></textarea>
						</div>
					</div>
				</div>

				<div class="layui-row">
					<div class="layui-col-md6">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit="" lay-filter="btn-form-submit">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</div>
			</form>

		</div>
	</div>

	<script src="${ctxPath}/lib/layui/layui.js" charset="utf-8"></script>
	<script src="${ctxPath}/js/core.util.js" charset="utf-8"></script>
	<script src="${ctxPath}/js/lay-config.js" charset="utf-8"></script>

	<script type="text/javascript">
		layui.use(['form', 'layer', 'notice', "xmSelect"], function () {

			var $ = layui.jquery, form = layui.form, layer = layui.layer, notice = layui.notice, xmSelect = layui.xmSelect;

			let menu = xmSelect.render({
				el: '#authoritiesEditParentSel',
				height: 'auto',
				data: [],
				tips: '请选择父级菜单',
				autoRow: true,			// 是否开启自动换行(选项过多时)
				filterable: true,		// 是否开启搜索
				clickClose: true,		// 是否点击选项后自动关闭下拉框
				radio: true,
				//name: 'pid',			// 表单提交时的name
				toolbar: {show: true},
				prop: {name: 'name', value: 'id'},
				list: ["ALL", "CLEAR", "REVERSE"],
				tree: {
					show: true,				// 是否展示为树状结构
					showFolderIcon: true,	// 是否显示节点前的三角图标
					showLine: true,			// 是否显示虚线
					indent: 25,				// 间距
					expandedKeys: false,	// 默认展开的节点数组, 为true时展开所有节点
					strict: false, 			//重点！！设置成非严格父子模式，这样父节点被禁用，子节点依然可以点击
				},
				model: {
					icon: 'hidden',//是否展示复选框或者单选框图标 show, hidden:变换背景色
					type: 'fixed',
				},
				on: function (data) {
					console.log(data);
					if (data.isAdd) {
						$("#pid").val((data.change.slice(0, 1))[0].pid);
					}
				},
			});

			// 查询所有菜单
			sendAjax("/sys/menu/queryMenuList?id=" + request("id"), null, function (result) {
				menu.update({
					data: result.data,
				});
			}, "GET");


			// 查询应用
			sendAjax("/sys/app/listAll", null, function (rest) {
				$("#application").empty();
				$.each(rest.data, function (i, e) {
					$("#application").append("<option value='" + e.id + "'>" + e.name + "</option>");
				});
				form.render('select');
			});

			// 获取详情信息，填充表单
			let id = request("id");
			if (id != "") {
				sendAjax("/sys/menu/findById?id=" + id, null, function (result) {
					form.val('formInfo', result.data);
				});
			}

			//监听提交
			form.on('submit(btn-form-submit)', function (data) {

				sendAjax("/sys/menu/saveOrUpdate", JSON.stringify(data.field), function (rest) {
					notice.msg(rest.msg, {icon: 1});
				}, "POST");

				return false;
			});

		});
	</script>
</body>

</html>